<template>
  <div class="add">
    <img class="icon" src="https://iconfont.alicdn.com/p/illus/preview_image/PBVMujrUCcf7/94eb4b0b-9783-4a31-bd5b-5357df72da4d.png" alt="">
    <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path:'/index/stock' }">库存总览</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path:'/index/search' }">库存查询</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path:'/index/mo-amend' }">库存更改</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path:'/index/addmounted' }">新增商品库存</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/index/hint' }"
        >急需补货提示</el-breadcrumb-item
      >
    </el-breadcrumb>

    <h1 class="table">新增商品库存管理</h1>

      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules"
      label-width="120px" class="demo-ruleForm">
      <el-form-item label="商品id：" prop="goodsid">
        <el-input v-model="ruleForm.goodsid" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="商品名：" prop="goodsname">
        <el-input v-model="ruleForm.goodsname"  type="text"  autocomplete="off"/>
      </el-form-item>
      <el-form-item label="库存量：" prop="goodsamount">
        <el-input v-model.number="ruleForm.goodsamount" />
      </el-form-item>
      <el-form-item label="最大库存量：" prop="maxamount">
        <el-input v-model.number="ruleForm.maxamount" />
      </el-form-item>
      <el-form-item label="商品价格：" prop="goodspreon">
        <el-input v-model.number="ruleForm.goodspreon" />
      </el-form-item>
        <el-form-item>
          <el-button :plain="true" @click="submitForm(ruleForm)">确定添加</el-button>
          <el-button @click="resetForm(ruleFormRef)">清空</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>


<script setup>
import axios from 'axios'
import {useRouter} from 'vue-router'
import { reactive, ref } from 'vue'
import {user_addgoods} from '../../../utils/api'
// 去掉导入的{}大括号
import   FormInstance  from 'element-plus'

var $router = useRouter();

var ruleFormRef =ref();
const checkgoodsamount = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('商品库存量不能为空'))
  }
}

const checkgoodsid = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('商品id不能为空'))
  } 
}
const checkgoodsname = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('商品名不能为空'))
  } 
}
const checkgoodspreon = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('商品价格不能为空'))
  } 
}
const checkmaxamount = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('商品最大库存量不能为空'))
  } 
}

const ruleForm = reactive({
  goodsid: '',
  goodsname: '',
  goodspreon: '',
  goodsamount: '',
  maxamount: '',
})
// ruler 为验证方法（统一调用前面定义的验证方法）
const rules = reactive({
  goodsamount: [{ validator: checkgoodsamount, trigger: 'blur' }],
  goodsid: [{ validator: checkgoodsid, trigger: 'blur' }],
  goodsname: [{ validator: checkgoodsname, trigger: 'blur' }],
  goodspreon: [{ validator: checkgoodspreon, trigger: 'blur' }],
  maxamount: [{ validator: checkmaxamount, trigger: 'blur' }],
})
// 连个按钮的方法
// 确认添加新商品
const submitForm = (ruleForm) => {
  // console.log(ruleForm)
  if(ruleForm.goodsid != ''){
    user_addgoods({obj: ruleForm}).then((res)=>{
      // console.log(res);
      if(res.data.states == 200){
        ElMessage.error('添加失败')
          }else{
           
            ElMessage({
              message: '添加成功。',
              type: 'success',
            })
          }
      
      $router.push('/index/stock');

    })
   
  }
    
  }

// 清空列表
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style scoped>
.add{
  position: relative;
}
.icon{
  position: absolute;
  top: 0px;
  right: 600px;
  width: 100px;
  height: 100px; 
}
.table{
  margin: 25px;
}
</style>